iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

技術在走,Vue.js 要有系列 第 29

|D29| vue-router 過場動畫

  • 分享至 

  • xImage
  •  

先創建 router/index.js

import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'

var router = new VueRouter({
    routes:[{
        name:'test',
        path:'/',
        meta:{index:0},
        component:{
            template:'<div>test</div>'
        }
    },{
        name:'home',
        path:'/home',
        meta:{index:1},
        component:Home
    },{
        name:'user',
        path:'/user/:id',
        meta:{index:2},
        component:User
    }]
});

用 watch 監聽 $router 的變化,如果 to.meta.index 大於 from.meta.index,則是前進狀態

<template>
  <div id="app">
    <transition :name="transitionName">   
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
          transitionName:''
      }
  },
  watch: {
    $route(to, from) {
      
      if(to.meta.index > from.meta.index){

        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>


上一篇
|D28| 用 vuex 實作資料操作
下一篇
|D30| 照慣例,完賽心得和總目錄
系列文
技術在走,Vue.js 要有30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言